<template>
  <div>
    <el-table
      :data="DataSource"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <template v-for="(item, index) in columns">
        <template> 
          <!-- 有选中框的情况 -->
          <el-table-column :key="index" v-if="item.type == 'selection'" :type="item.type"></el-table-column>
          <!-- 一般情况 -->
          <el-table-column :key="index" v-if="item.type == 'text'" :type="item.type" :label="item.label"
           :width="item.width" :prop="item.prop">
            <template slot-scope="scope">
              <span v-if="item.child">
                <template v-for="pr in item.child">
                    {{ scope.row[pr.prop] }}
                    <span>/</span>
                </template>
              </span>
              <span :style="{ 'color': item.color }" v-else>{{scope.row[item.prop]}}</span>
            </template>
          </el-table-column>
          <!-- 数字处理(颜色、符号) -->
          <el-table-column :key="index" v-if="item.type == 'number'" :label="item.label">
            <template slot-scope="scope">
              <span :style="scope.row[item.prop].value > 0 ? {'color':'red'}:{'color':'green'}">{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
          <!-- 需要转化的时间 -->
          <el-table-column :key="index" v-if="item.type == 'date'" :label="item.label">
            <template slot-scope="scope">
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
          <!-- 图片 -->
          <el-table-column :key="index" v-if="item.type == 'image'" :label="item.label">
            <template slot-scope="scope">
              <el-image :style="{'width': item.width, 'height': item.height}" :src="scope.row.url" :fit="item.fit"></el-image>
            </template>
          </el-table-column>
          <!-- 按钮 -->
          <el-table-column :key="index" v-if="item.type == 'button'" :type="item.type" :label="item.label"
            :width="item.width" :prop="item.prop">
            <template slot-scope="scope">
              <template v-for="(btn, index) in item.btnOption" >
                <el-button :key="index" :type="btn.type ? btn.type : 'primary'" :size="btn.size"
                  :disabled="btn.disabled" :icon="btn.icon" @click="click(scope.row, index, btn.label)"
                  >{{ btn.label }}
                </el-button>
              </template>
            </template>
          </el-table-column>
          <!--  -->
        </template>
      </template>
    </el-table>

    <template v-if="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </template>
  </div>
</template>
   
<script>
export default {
  props: {
    DataSource: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
    pagination: {
      type: Boolean,
      default: false,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    total: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      currentPage1: this.currentPage,
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    // ·································
    handleCurrentChange(page) {
      this.currentPage1 = page;
      this.$emit("pageChange", this.currentPage1);
    },
    click(row, index, btn) {
      this.$emit("rowOption", row, index, btn);
    },
  },
};
</script>

<style scoped>
.el-pagination {
  float: right;
}
</style>